<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            display: flex;
            width: 100px;
            height: 50px;
        }
        .left {
            width: 50px;
            height: 100%;
            background-color: olive;
        }
        .main {
            width: 100%;
            height: 100%;
            background-color: orange;
        }
    </style>
</head>
<body>
    
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
    </div>

    <div class="test" style="width: 100px; height: 100px; background-color: black;"></div>
    <div id="App">
        <div v-for="(item, index) in array" :key="item.name">{{ item.name }} computed: {{ text(index) }}</div>
        <apple :array.sync="array" />
    </div>
    <template id="com">
        <div>
            {{ array }}
        </div>
    </template>
</body>
<script>
    const ele = document.querySelector('.test');
    ele.addEventListener('touchend', function() {
        console.log('end');
    })
    ele.addEventListener('click', function() {
        console.log('click');
    })
    const vm = new Vue({
        el: '#App',
        data: {
            array: [
                {
                    name: 1
                },
                {
                    name: 2
                },
                {
                    name: 3
                },
                {
                    name: 4
                }
            ],
            array: [1,2,3,4,5],
            obj: {
                a: 10
            }
        },
        computed: {
            text(index) {
                return (index) => {
                    return index;
                }
            }
        },
        components: {
            apple: {
                template: '#com',
                props: [ 'array' ],
                methods: {
                    test() {
                        let arr = this.array.filter((i) => {
                            if(i % 2 === 0) {
                                return true;
                            }
 
                        })
                        this.$emit('update:array', arr);
                        console.log(this.array);
                    }
                }
            }
        }
    })
    
</script>
</html>